<template>
  <div class="topbar">

    <div class="topbar-toggle" @click.stop="toggleMenu">
      <i class="iconfont icon-menu"></i>
    </div>

    <transition name="menu">
      <div class="topbar-box" v-show="menuVisible">

        <div class="topbar-box-item topbar-box-user" :class="{'activated': fatherRoute === 'user'}" @click="go( 'User', { name: 'profile' } )">
          <!-- <i class="iconfont icon-personal"></i><span>个人中心</span> -->
          <span style="position:relative;top:4px;">
            {{userInfo&&userInfo.username}} 同志，欢迎您
          </span>
        </div>
        <div class="topbar-box-item message-tip" :class="{'activated': fatherRoute === 'message'}" @click="go( 'Message', { name: 'unread' , params: { newMessage } } )">
          <i class="iconfont icon-message"></i><span>消息</span>
          <div class="new-message" v-show="newMessage"></div>
        </div>
        <a v-if="showHelpDoc" href="/doc" target="_blank" class="topbar-box-item">
          <i class="iconfont icon-help"></i><span>帮助</span>
        </a>
        <a href="javascript:;" class="topbar-box-item topbar-box-logout" @click="logout">
          <i class="iconfont icon-signout"></i> 退出
        </a>
      </div>
    </transition>

    <div class="breadcrumb-box">
      <g-breadcrumb :paths="path" v-show="!isMobile"></g-breadcrumb>
    </div>
  </div>
</template>

<script>
import GBreadcrumb from "@/components/common/g-breadcrumb";
import newConfig from "@/config/newConfig.js";
import axios from "axios";
import qs from "qs";
import { setTimeout } from "timers";
export default {
  name: "topbar",

  data() {
    let componentConf =
      this.$root && this.$root.componentConf ? this.$root.componentConf : null;
    return {
      menuVisible: false,
      userId: this.$root.geohey ? this.$root.geohey.user.id : null,
      showDevDoc: componentConf ? componentConf.dev_doc : true,
      showHelpDoc: componentConf ? componentConf.help_doc : true,
      showPersonalPortal: componentConf ? componentConf.personal_portal : true,
      userInfo: null
    };
  },

  props: {
    newMessage: Boolean,
    path: Array,
    fatherRoute: String,
    isMobile: Boolean
  },
  mounted() {
    this.checkUserStatus();
  },
  methods: {
    checkUserStatus() {
      let token = this.getCookie("token");
      if (!token) {
        return;
      }
      let url = `${newConfig.host}/cloud/sign/verify`;
      axios
        .post(
          url,
          qs.stringify({
            token: token
          })
        )
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.userInfo = response.data.data;
            let email = this.userInfo.email;

            this.userInfo.username = email.slice(0, email.indexOf("@"));
            this.userInfo.token = token;
            //if (this.userInfo.role == "admin") {
            this.$store.state.userInfo = this.userInfo;
              // setTimeout(()=>{
              //     let regDataDom = document.querySelector('.reg-data-nav');
              //     if(regDataDom){
              //        regDataDom.style.display='block';
              //     }
              // }, 200);
            //}
          } else {
            this.userInfo = null;
          }
        });
    },
    getCookie(cookie_name) {
      var allcookies = document.cookie;
      var cookie_pos = allcookies.indexOf(cookie_name);
      if (cookie_pos != -1) {
        cookie_pos = cookie_pos + cookie_name.length + 1;
        var cookie_end = allcookies.indexOf(";", cookie_pos);
        if (cookie_end == -1) {
          cookie_end = allcookies.length;
        }
        var value = unescape(allcookies.substring(cookie_pos, cookie_end));
      }
      return value;
    },
    onClick() {
      this.menuVisible = false;
      document.removeEventListener("click", this.onClick, false);
    },
    toggleMenu() {
      this.menuVisible = !this.menuVisible;

      if (this.menuVisible) {
        document.addEventListener("click", this.onClick, false);
      } else {
        document.removeEventListener("click", this.onClick, false);
      }
    },
    logout() {
      let promise = this.$confirm("确定要退出登录吗?", "退出", {
        type: "warning"
      });
      promise
        .then(() => {
          this.removeCookies("token", "/", document.domain);
          this.removeCookies("token", "/");

          location.href = "/?go";
        })
        .catch(() => {});
    },
    go(name, params = {}) {
      if (name.toLowerCase() !== this.$route.name.toLowerCase()) {
        this.$emit("on-change");
      }

      this.$router.push({ name, params });
    },
    removeCookies(key, path, domain) {
      if (!key || !this.isKey(key)) {
        return false;
      }
      document.cookie =
        encodeURIComponent(key) +
        "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" +
        (domain ? "; domain=" + domain : "") +
        (path ? "; path=" + path : "");
      return true;
    },
    isKey: function(key) {
      return new RegExp(
        "(?:^|;\\s*)" +
          encodeURIComponent(key).replace(/[\-\.\+\*]/g, "\\$&") +
          "\\s*\\="
      ).test(document.cookie);
    }
  },

  components: {
    GBreadcrumb
  }
};
</script>

<style lang="scss">
@import "../../assets/styles/common";

$headerColor: #566067;

.topbar {
  width: 100%;
  height: 72px;
  position: fixed;
  top: 0;
  z-index: 100;
  font-size: 14px;
  color: $dark;
  border-bottom: 1px solid $bdGray;
  background: #fff;
  user-select: none;

  .topbar-header {
    .topbar-header-logo {
      float: left;
      display: inline-block;
      height: 100%;
      width: 70px;
      height: 62px;
      padding: 12px 16px;
      cursor: pointer;

      > a {
        display: inline-block;
        width: 100%;
        height: 100%;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .topbar-header-title {
      float: left;
      > h1 {
        font-size: 21px;
        cursor: pointer;
        display: inline-block;
        line-height: 62px;
        font-weight: 300;
      }

      > span {
        display: inline-block;
        font-weight: 400;
        font-size: 12px;
        color: $gray;

        // @media screen and (max-width: 750px) {
        //     & {
        //         display: none;
        //     }
        // }
      }
    }
  }

  .topbar-toggle {
    display: none;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #e6e9f0;
    line-height: 38px;
    text-align: center;
    margin: 10px 20px;
    cursor: pointer;
    > i {
      font-size: 26px;
    }
  }

  .topbar-box {
    float: right;
    line-height: 68px;
    display: block;

    .topbar-box-item.message-tip {
      .new-message {
        position: absolute;
        width: 8px;
        height: 8px;
        top: 24px;
        left: 16px;
        text-align: center;
        background-color: #d9534f;
        border-radius: 100%;
        color: #fff;
      }
    }

    .topbar-box-item {
      display: inline-block;
      float: left;
      // min-width: 90px;
      margin-left: 16px;
      padding: 0 5px;
      color: $headerColor;
      cursor: pointer;
      position: relative;

      > i {
        font-size: 18px;
        position: relative;
        top: 2px;
        margin-right: 5px;
      }

      &:hover {
        font-weight: 500;
        color: $primary;
      }

      &.topbar-box-dev {
        > i {
          top: 0;
        }
      }

      &.activated {
        color: $primary;
        font-weight: 500;
      }
    }

    .topbar-box-logout {
      display: block;
      float: right;
      height: 100%;
      // width: 80px;
      // min-width: 80px;
      // line-height: 62px;
      text-align: center;
      padding: 0 20px 0 10px;

      > i {
        color: $danger;
        margin-right: 2px;
      }

      &:hover {
        // > i {
        color: $danger;
        // }
      }
    }

    .topbar-box-signin {
      display: block;
      text-align: center;

      &:hover {
        color: #1989fa;
      }
    }
  }

  .breadcrumb-box {
    float: left;
    line-height: 68px;
    display: block;
    height: 100%;
    margin-left: 165px;
    padding-left: 23px;
  }

  // @media screen and (min-width: 751px) {
  .topbar-box {
    display: block !important;
  }
  // }

  // @media screen and (max-width: 750px) {

  //     .topbar-toggle {
  //         display: block;
  //     }

  //     .topbar-box {
  //         line-height: 40px;
  //         position: absolute;
  //         top: 61px;
  //         right: 0px;
  //         background: #f6f8fb;
  //         width: 140px;
  //         min-height: 100%;
  //         border: 1px solid $bdGray;
  //         max-height: 1000px;
  //         overflow: hidden;

  //         .topbar-box-item {
  //             height: 40px;
  //             line-height: 40px;
  //             width: 100%;
  //             padding: 0 20px;
  //             margin: 0;
  //             float: none;

  //         }

  //         .topbar-box-logout {
  //             text-align: left;
  //             width: 100%;
  //         }
  //         // display: none;
  //     }
  // }
}
</style>
